'use client'

import AppCard from "@/components/ai/apps/app-card"
import AppCreator from "@/components/ai/apps/app-creator"
import { useAppContextSelector } from "@/context/app-context"

const SupportPage = () => {
    const appList = useAppContextSelector(state => state.apps)

    return (
        <div className="flex flex-col">
            <div className="p-4 grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-2">
                <AppCreator />
                {appList.map(app => (
                    <AppCard
                        key={app.id}
                        id={app.id}
                        name={app.name}
                        type={app.type}
                        desc={app.description}
                    />
                ))}
            </div>
        </div>
    )
}

export default SupportPage